<template>
    <div class="form-block-inner">
        <div class="opt-area-02">
            <div class="right-con">
                <!--                <div class="input-frame">-->
                <!--                    <Input type="text" placeholder="请输入姓名" v-model="params.name" />-->
                <!--                </div>-->
                <div class="input-frame">
                    <Input type="text" placeholder="请输入身份证号" clearable v-model="params.card_no"/>
                </div>
                <Button style="margin-right: 10px" type="success" @click="selectlist(1)">查询</Button>
                <Button style="margin-right: 10px" type="error" @click="deleteOnly">删除唯一</Button>
                <div class="input-frame2">
                    <Input type="text" placeholder="请输入openid" clearable v-model="selectobj.openid"/>
                </div>
                <Button style="margin-left: 10px" type="success" @click="selectRedis">查询</Button>
                <Tooltip max-width="400" :content="content">
                    <Icon type="ios-help-circle-outline" style="margin-left: 5px"/>
                </Tooltip>
            </div>
        </div>
        <Table v-if="kuInfo" :loading="loading" border :columns="columns2" :data="fcDataList" size="small">
            <template slot-scope="{ row }" slot="health_type">
                <div v-if="row.health_type==='0'">健康</div>
                <div v-if="row.health_type==='1'" style="color: orangered">异常</div>
            </template>
            <template slot-scope="{ row }" slot="person_type">
                <div v-if="row.person_type==='0'">正常</div>
                <div v-if="row.person_type==='1'" style="color: orangered">离职</div>
                <div v-if="row.person_type==='2'" style="color: orangered">休假</div>
                <div v-if="row.person_type==='3'" style="color: orangered">病假</div>
            </template>
            <template slot="action" slot-scope="{ row }">
                <Button class="table-action-btn" type="success" size="small"
                        @click="showdetail(row)">查看
                </Button>
                <Button class="table-action-btn" type="error" size="small"
                        @click="delAction(row)">删除
                </Button>
                <Button class="table-action-btn" type="warning" size="small"
                        @click="trajectory(row)">查看轨迹
                </Button>
            </template>
        </Table>
        <Table v-if="redisInfo" :loading="loadingR" border :columns="columns" :data="redisList" size="small">
            <template slot="action" slot-scope="{ row }">
                <Button class="table-action-btn" type="success" size="small"
                        @click="showInfo(row)">查看
                </Button>
                <Button class="table-action-btn" type="error" size="small"
                        @click="delRedis(row)">删除
                </Button>
            </template>
        </Table>
        <option-modal ref="optionModal" :modal-title="modalTitle" :modal-show="modalShow" :modal-type="modalType"
                      :modalWidth="modalWidth" :dataObj="modalData" @cancelOption="cancelOption"
                      @saveOption="saveOption"></option-modal>
        <div v-if="show" class="path">
            <vxe-toolbar export custom></vxe-toolbar>
            <vxe-table
                    border
                    show-header-overflow
                    show-overflow
                    highlight-hover-row
                    :loading="tableloading"
                    height="400"
                    :align="allAlign"
                    :data="tableList"
                    export-config>
                <vxe-table-column type="seq" title="序号" width="80"></vxe-table-column>
                <vxe-table-column field="target_nickname" title="微信昵称" width="200"></vxe-table-column>
                <vxe-table-column field="longitude" title="经度" width="200"></vxe-table-column>
                <vxe-table-column field="latitude" title="纬度" width="200"></vxe-table-column>
                <vxe-table-column field="create_time" title="扫码时间" width="200" sortable></vxe-table-column>
                <vxe-table-column field="place_name" title="场所名称" width="200"></vxe-table-column>
                <vxe-table-column field="place_name_no" title="场所编号" width="200"></vxe-table-column>
                <vxe-table-column field="master_id" title="场所id" min-width="200"></vxe-table-column>
            </vxe-table>
        </div>
        <customer-info :countChange="changeNum" :options="options" :other="otherData"></customer-info>
        <Table v-if="personInfo" :loading="loadingR" border :columns="personColumns" :data="personList" class="agency">
            <template slot="action" slot-scope="{ row }">
                <Button class="table-action-btn" type="error" size="small"
                        @click="delAgency(row,1)">删除
                </Button>
            </template>
        </Table>
        <Table v-if="ChildrenInfo" :loading="loadingR" border :columns="childrenColumns" :data="childrenList"
               class="agency">
            <template slot="action" slot-scope="{ row }">
                <Button class="table-action-btn" type="error" size="small"
                        @click="delAgency(row,2)">删除
                </Button>
            </template>
        </Table>
    </div>
</template>

<script>
import { findArticleList, updatePermitInfo, peopleTrackList, selectRedisInfo, useOpenidDelRedis, delUniIdcardRedis, deleteDelAgency } from '@/api/customer-service'
import customerInfo from '@/views/pages/customer-service/search/components/customer-info.vue'
import areaList from './date/area.json'
import streetList from './date/street.json'
import communityList from './date/community.json'
import OptionModal from './components/option-modal'

export default {
  name: 'index',
  components: { OptionModal, customerInfo },
  data () {
    // const checkidcard = (rule, value, callback) => {
    //  if (!this.$common.identityCodeValid(value)) {
    //    callback(new Error('身份证号不合法！'))
    //  } else {
    //    callback()
    //  }
    // }
    return {
      content: '用户显示身份证已经注册或显示身份信息有误，但是客服后台查询不到用户信息，就让用户填写复核信息，从复核信息中取到该用户的openid，在此功能删除，并让用户重新注册',
      modalShow: false,
      ChildrenInfo: false,
      personInfo: false,
      modalTitle: '',
      modalType: '',
      modalWidth: 600,
      modalData: {},
      kuInfo: false,
      redisInfo: false,
      tableloading: true,
      show: false,
      allAlign: 'center',
      tableList: [],
      redisList: [],
      options: {},
      showModel: false,
      changeNum: 0,
      name: '0',
      loading: false,
      loadingR: false,
      row: {},
      formItem: {},
      date: '',
      selectobj: {},
      params: { name: '', type: '', pageNo: 1, pageSize: 10, totalRecord: 0, state: '' },
      ruleCustom: {},
      areaList: areaList,
      streetList: streetList,
      communityList: communityList,
      columns2: [
        { title: '姓名', key: 'name', width: 170, align: 'center' },
        { title: '身份证号', key: 'card_no', width: 160, align: 'center' },
        { title: '社区', key: 'community', align: 'center' },
        { title: 'p1', key: 'p1', align: 'center' },
        // { title: '健康状态', slot: 'health_type', width: 140, align: 'center' },
        // { title: '人员状态', slot: 'person_type', width: 140, align: 'center' },

        // { title: '轨迹经度', key: 'longitude', width: 160, align: 'center' },
        // { title: '轨迹纬度', key: 'latitude', width: 160, align: 'center' },
        { title: '操作', align: 'center', width: 300, slot: 'action', fixed: 'right' }
      ],
      columns: [
        { title: '姓名', key: 'name', width: 170, align: 'center' },
        { title: '身份证号', key: 'card_no', width: 160, align: 'center' },
        { title: '地址', key: 'loc_title', align: 'center' },
        { title: '操作', align: 'center', width: 300, slot: 'action', fixed: 'right' }
      ],
      childrenColumns: [
        { title: '姓名', key: 'name', width: 160, align: 'center' },
        { title: '身份证号', key: 'cardno', width: 250, align: 'center' },
        { title: '儿童代办关系', key: 'relation', width: 200, align: 'center' },
        { title: '创建时间', key: 'create_time', width: 220, align: 'center' },
        { title: '操作', align: 'center', minWidth: 140, slot: 'action', fixed: 'right' }
      ],
      personColumns: [
        { title: '姓名', key: 'name', width: 160, align: 'center' },
        { title: '身份证号', key: 'cardno', width: 250, align: 'center' },
        { title: '父母代办关系', key: 'relation', width: 200, align: 'center' },
        { title: '创建时间', key: 'create_time', width: 220, align: 'center' },
        { title: '操作', align: 'center', minWidth: 140, slot: 'action', fixed: 'right' }
      ],
      fcDataList: [],
      otherData: {},
      childrenList: [],
      personList: []
    }
  },
  methods: {
    showdetail (row) {
      row.area_id = parseFloat(row.area_id)
      row.street_id = parseFloat(row.street_id)
      row.community_id = parseFloat(row.community_id)
      row.areaList = this.areaList
      // 组装街道
      let new_street_list = []
      if (row.area_id !== '' && row.area_id !== undefined && row.area_id !== null) {
        for (let i = 0; i < this.streetList.length; i++) {
          if (parseFloat(this.streetList[i].pid) === parseFloat(row.area_id)) {
            new_street_list.push(this.streetList[i])
          }
        }
        console.log(new_street_list, '组装街道')
        row.streetList = new_street_list

        // 组装 社区列表
        let new_community_list = []
        if (row.street_id !== '' && row.street_id !== undefined && row.street_id !== null) {
          console.log(row.street_id, 'street_id')
          for (let i = 0; i < this.communityList.length; i++) {
            if (parseFloat(this.communityList[i].pid) === parseFloat(row.street_id)) {
              new_community_list.push(this.communityList[i])
            }
          }
          console.log(new_community_list, '组装社区')
          row.communityList = new_community_list
        } else {
          row.communityList = this.communityList
        }
      } else {
        row.streetList = this.streetList
      }
      console.log(row)
      row.arrive_time = this.getDate(row.arrive_time)
      this.changeNum++
      // this.showModel = true
      this.options = row
    },
    getDate (str) {
      let oDate = new Date(str)
      let oYear = oDate.getFullYear()
      let oMonth = oDate.getMonth() + 1
      let oDay = oDate.getDate()
      let oTime = oYear + '-' + oMonth + '-' + oDay
      return oTime
    },
    trajectory (row) {
      this.show = true
      this.tableloading = true
      let data = { openid: row.openid }
      this.axiosPeopleAction(data, 1)
    },
    axiosPeopleAction (data, i) {
      data.dbNum = i
      peopleTrackList(data).then(ret => {
        if (ret.data.errcode === 200) {
          this.$Message.success('共8个,第【' + i + '】数据完成！')
          this.tableloading = false
          if (i == 1) {
            this.tableList = ret.data.data
          } else {
            this.tableList.push.apply(this.tableList, ret.data.data)
          }
          if (i < 8) {
            this.axiosPeopleAction(data, i + 1)
          }
        } else {
          this.tableloading = false
          this.$Message.error('获取信息失败，请检查网络！')
        }
      })
    },
    selectlist () {
      // if (!this.$common.identityCodeValid(this.params.card_no) && this.params.card_no) {
      //  this.$Message.error('身份证不合法！')
      //  return false
      // }

      this.ChildrenInfo = true
      this.personInfo = true
      this.kuInfo = true
      this.show = false
      this.loading = true
      findArticleList(this.params, true).then(ret => {
        if (ret.data.errcode === 0 || ret.data.errcode === 200) {
          this.loading = false
          this.fcDataList = ret.data.data.list
          this.otherData = ret.data.data.other
          this.childrenList = ret.data.data.other.children
          this.personList = ret.data.data.other.person
        } else {
          this.$Notice.error('获取信息失败，请检查网络！')
        }
      })
    },
    deleteOnly () {
      console.log(this.params.card_no, '删除参数')
      let data = {
        id_card: this.params.card_no
      }

      if (data) {
        this.$Modal.confirm({
          title: '温馨提示:',
          content: '是否确认删除，删除后无法回复',
          onOk: () => {
            delUniIdcardRedis(data).then(ret => {
              if (ret.data.errcode === 200) {
                this.$Message.success('删除成功！')
              } else {
                this.$Message.error({ desc: ret.data.errmsg })
              }
            })
          }
        })
      } else {
        this.$Message.warning('请输入查询条件')
      }
    },
    saveOption () {
      this.modalShow = false
    },
    cancelOption () {
      this.modalShow = false
    },
    showInfo (data) {
      this.modalTitle = '查看详情'
      this.modalType = 'info'
      this.modalWidth = 800
      this.modalData = this.$common.xeUtils.clone(data)
      this.modalShow = true
    },
    selectRedis () {
      if (this.selectobj.openid === '' || this.selectobj.openid === undefined) {
        this.$Message.warning('请输入查询条件')
        return false
      }
      this.redisInfo = true
      let data = { openid: this.$common.xeUtils.trim(this.selectobj.openid) }

      this.loadingR = true
      selectRedisInfo(data).then(ret => {
        if (ret.data.errcode === 200) {
          this.redisList = [ret.data.data.list]
          this.loadingR = false
        } else {
          this.$Notice.error('获取信息失败，请检查网络！')
        }
      })
    },
    delAgency (row, type) {
      let data = { openid: this.fcDataList[0].openid, id: row.id, type: type }
      this.$Modal.confirm({
        title: '温馨提示',
        content: '是否确认删除代办，删除后无法回复',
        onOk: () => {
          deleteDelAgency(data).then(ret => {
            if (ret.data.errcode === 200) {
              this.$Message.success('删除成功！')
              this.selectlist()
            } else {
              this.$Message.error({ desc: ret.data.errmsg })
            }
          })
        }
      })
    },
    delRedis (row) {
      let data = { openid: row.openid }
      this.$Modal.confirm({
        title: '温馨提示',
        content: '是否确认删除，删除后无法回复',
        onOk: () => {
          useOpenidDelRedis(data).then(ret => {
            if (ret.data.errcode === 200) {
              this.$Message.success('删除成功！')
              this.selectRedis()
            } else {
              this.$Message.error({ desc: ret.data.errmsg })
            }
          })
        }
      })
    },
    delAction (row) {
      row.del = 'yes'
      this.$Modal.confirm({
        title: '温馨提示',
        content: '是否确认删除，删除后无法回复',
        onOk: () => {
          updatePermitInfo(row).then(ret => {
            if (ret.data.errcode === 200) {
              this.$Message.success('删除成功！')
              this.selectlist()
            } else {
              this.$Message.error({ desc: ret.data.errmsg })
            }
          })
        }
      })
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
    .form-block-inner {
        margin-bottom: 50px;
    }

    .table-action-btn {
        margin-left: 5px;
    }

    .path {
        margin-top: 20px;
    }

    .agency {
        margin-top: 20px;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame2 {
        width: 270px;
        margin-left: 20px;
    }
</style>
